<template>
  <div>
    <goga-header title="个人资料">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div v-if="account.data" class="myinfo-wrapper">
      <cell title="头像" class="top-4" is-link @click="upface()">
        <div class="face-pic"><img :src="account.data.uHeadPic" alt="" ></div>
      </cell>
      <div @click="nikeShow = true">
        <cell title="昵称" @click="nikeToggle(true)" is-link>
          {{account.data.userName}}&nbsp
          <icon symbol="right"></icon>
        </cell>
      </div>

      <!--<cell title="生日">-->
      <!--{{account.changeBirthday}}&nbsp;<i class="iconfont icon-indicate"></i>-->
      <!--</cell>-->

      <div @click="link({name:'setPwd'})">
        <cell title="修改密码 " is-link  class="top-4">
          <icon symbol="right"></icon>
        </cell>
      </div>

    </div>
    <div class="nike-wrapper" v-show="nikeShow" @click="nikeShow = false">
      <div class="nike-box" @click.stop.prevent>
        <div class="p-tit">修改昵称</div>
        <div class="ipt"><input type="text"  placeholder="请输入昵称" v-model.trim="nickname"></div>
        <div class="control"><a @click="nikeShow = false">取消</a><a @click="changeNike()">确定</a></div>
      </div>
    </div>
  </div>
</template>
<script lang="babel">
  import api from '@api'
  import {mapGetters} from 'vuex'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import Cell from '@components/cell'

  const fetchAccountData = async (store, shopId) => {
    return await store.dispatch('global/user/getUser', {shopId})
  }
  export default {
    components: {
      gogaHeader,
      Icon,
      Cell
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        account: 'global/user/getAccount'
      })
    },
    data () {
      return {
        nikeShow: false,
        nickname: ''
      }
    },
    async mounted() {
      let state = await this.$store.dispatch('global/user/log');
      if(!this.isLogin) {
        this.$router.push({name: 'login', query:{redirect: '/tempOrder/'+ orderId}})
        return;
      }
      if(!this.account.data) {
        fetchAccountData(this.$store)
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      link (route) {
        if (this.isLogin) {
          this.$router.push(route)
        } else {
          this.$router.push({name: 'login', query:{redirect: '/setting'}})
        }
      },
      async changeNike () {
        await this.$store.dispatch('global/user/log');
        if (this.nickname === '') {
          this.$store.dispatch('global/toast', '昵称不能为空');
          return
        }
        let {data:{StatusCode}} = await api.post('api/v1/UserInfo/editUsername.ashx', {userName: this.nickname})
        if (StatusCode === '200') {
          fetchAccountData(this.$store)
          this.$store.dispatch('global/toast', '修改成功');
          this.nikeShow = false;
        }
      }
    }
  }
</script>
<style lang="less">
  @import "index.less";
</style>